<template>
  <div>
    <b-card>
      <template #header>
        <b-form-file  v-model="file" ref='file'></b-form-file>
      </template>
      <b-container fluid>
          <b-row>
              <b-col v-for="(file, index) in mFiles" :key="index">
                <b-tag @remove="mFiles.pop(index)">{{file.name}}</b-tag>
              </b-col>
          </b-row>
      </b-container>
    </b-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
        file: null,
        mFiles: []
    };
  },
  watch:{
      file: function(val){
          if(val)
            this.mFiles.push(val)
          this.$refs['file'].reset()
      },
      mFiles: function(val){
          if(!this.files)return
          this.files.splice(0, this.files.length)
          val.forEach(item => {
              this.files.push(item)
          });
      }
  },
  model:{
      prop: 'files'
  },
  props:{
      files: Array,
      type: String
  }
};
</script>


<style lang="scss" scoped>
</style>